<template>
    <div style="padding:1%;margin-left: 15%;height: 100%;background-color: #f5f7f9;">
        <Card :bordered="false" dis-hover>
            <p slot="title"
               style="font-size: larger;font-weight: bolder;display: flex;justify-content: space-between;height: 36px">
                <span>留言管理 / 留言列表</span>
                <RadioGroup v-model="queryVo.top" type="button" @on-change="getMessage">
                    <Radio :label="0">全部</Radio>
                    <Radio :label="1">置顶</Radio>
                </RadioGroup>
            </p>
            <!--查询表单-->
            <Form :model="queryVo" :label-width="80" inline>
                <FormItem label="留言内容:">
                    <Input v-model="queryVo.content" placeholder="请输入要搜索的留言内容"/>
                </FormItem>
                <Button icon="ios-search" type="primary" @click="getMessage">搜索</Button>
                <Button style="margin-left: 1%" @click="queryVo.content=''">重置</Button>
            </Form>
            <!--数据表格-->
            <div>
                <Table style="background-color: skyblue" height="410" row-key="mesId" :columns="messageColumns"
                       :data="messages">
                    <template slot-scope="{ row }" slot="targetUser">
                        <Avatar v-show="row.targetUser!==null"
                                :src="row.targetUser!==null?row.targetUser.uheadpicture:'无'"/>
                        <span style="margin-left: 10px">{{row.targetUser!==null?row.targetUser.unickname:'无'}}</span>
                    </template>
                    <template slot-scope="{ row }" slot="currUser">
                        <Avatar :src="row.currUser.uheadpicture"/>
                        <span style="margin-left: 10px;color: #333333">{{row.currUser.unickname}}</span>
                    </template>
                    <template slot-scope="{ row }" slot="top">
                        <span v-if="row.mesTop" style="color: red">是</span>
                        <span v-else>否</span>
                    </template>
                    <template slot-scope="{ row }" slot="action">
                        <Button size="small" type="info" icon="ios-thumbs-up" @click="setTop(row)">置顶/取消</Button>
                        <Button size="small" type="error" icon="md-trash" @click="deleteMessage(row.mesId)">删除</Button>
                    </template>
                </Table>
            </div>
            <!--分页-->
            <div>
                <Page style="height: 30px;margin-top: 1%" :total="queryVo.total" :page-size="queryVo.pageSize"
                      show-elevator show-sizer
                      show-total @on-change="changePageNum" :page-size-opts="pageSizeChoice"
                      @on-page-size-change="changePageSize"/>
            </div>
        </Card>
    </div>
</template>

<script>
  export default {
    data() {
      return {
        queryVo: {
          pageNum: 1,
          pageSize: 8,
          content: '',
          top: 0,
          like: false,
          total: 0
        },
        // 留言列表
        messages: [],
        // 留言映射表格规则
        messageColumns: [
          {
            title: '编号',
            key: 'mesId',
            tree: true,
            align: 'center',
            width: '120px'
          },
          {
            title: '留言内容',
            key: 'mesContent',
            align: 'center',
            width: '200px'
          },
          {
            title: '留言时间',
            key: 'mesMestime',
            align: 'center',
            width: '180px'
          },
          {
            title: '点赞数',
            key: 'mesLikecount',
            align: 'center'
          },
          {
            title: '是否置顶',
            slot: 'top',
            align: 'center'
          },
          {
            title: '目标用户',
            slot: 'targetUser',
            width: '180px'
          },
          {
            title: '用户',
            slot: 'currUser',
            width: '180px'
          },
          {
            title: '操作',
            slot: 'action',
            align: 'center',
            width: '250px'
          }
        ],
        pageSizeChoice: [8, 15, 20, 50, 100]
      }
    },
    mounted() {
      this.getMessage()
    },
    methods: {
      getMessage() {
        var params = new URLSearchParams(this.queryVo)
        this.$http.get('message', { params: params }).then(res => {
          res = res.data
          this.messages = res.data
          this.queryVo.total = res.count
        })
      },
      // 改变当前页码
      changePageNum(pagenum) {
        this.queryVo.pageNum = pagenum
        this.getMessage()
      },
      // 改变每页个数
      changePageSize(pagesize) {
        this.queryVo.pageSize = pagesize
        this.getMessage()
      },
      // 删除留言
      deleteMessage(id) {
        this.$Modal.confirm({
          title: '确认',
          content: '您确定要删除该留言及其子留言吗？',
          onOk: () => {
            this.$http.delete(`blog-message?id=${id}`).then(res => {
              res = res.data
              if (res.code === 6115) {
                this.$Message.success(res.msg)
                this.getMessage()
              } else {
                this.$Message.error(res.msg)
              }
            })
          }
        })
      },
      // 置顶和取消置顶
      setTop(row) {
        var params = new URLSearchParams()
        params.set('id', row.mesId)
        params.set('top', !row.mesTop)
        this.$http.put('blog-message', params).then(res => {
          res = res.data
          if (res.code === 6110) {
            this.$Message.success(res.msg)
            this.getMessage()
          } else {
            this.$Message.error(res.msg)
          }
        })
      }
    }
  }
</script>

<style scoped>

</style>
